<template>
    <div>
        <el-card shadow="never">
            <template slot="header">
                <span>银行管理</span>
            </template>

            <!-- 搜索区域 -->
            <Search :search-options="searchOptions" @search="handleSearch">
                <template slot="extra-buttons">
                    <el-button type="primary" @click="handleAdd" v-auth="'add'">添加银行</el-button>
                </template>
            </Search>

            <!-- 表格区域 -->
            <el-table v-loading="listLoading" element-loading-text="数据正在加载中" :data="data" border fit
                highlight-current-row style="width: 100%">
                <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
                    :align="item.align" :width="item.width">
                    <template slot-scope="{ row }">

                        <!-- 状态 -->
                        <div v-if="item.prop === 'useStatus'">
                            <el-tag :type="row.useStatus == 'YES' ? 'success' : 'danger'">
                                {{ row.useStatus == 'YES' ? '启用' : '禁用' }}
                            </el-tag>
                        </div>
                        <!-- 默认显示 -->
                        <div v-else>
                            {{ row[item.prop] || '-' }}
                        </div>
                    </template>
                </el-table-column>

                <!-- 操作列 -->
                <el-table-column label="操作" width="250" align="center">
                    <template slot-scope="{ row }">
                        <el-button v-if="row.useStatus == 'NO'" v-auth="'enable'" :type="'success'" size="mini" @click="handleChangeStatus(row)">
                            {{ '启用' }}
                        </el-button>
                        <el-button v-if="row.useStatus == 'YES'" v-auth="'disable'" :type="'danger'" size="mini" @click="handleChangeStatus(row)">
                            {{ '禁用' }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <Pagination :page="page" :page_size="page_size" :total="total" @sizeChange="sizeChange"
                @currentChange="pageChange" />
        </el-card>

        <!-- 添加/编辑对话框 -->
        <AddOrEdit ref="AddOrEditRef" @refresh="pageChange" />
    </div>
</template>

<script>
import Search from '@/components/Search.vue'
import Pagination from '@/components/Pagination.vue'
import { SEARCH_OPTIONS, columns } from './options'
import { bankList, bankDelete, bankChangeStatus } from './api'
import AddOrEdit from './AddOrEdit.vue'

export default {
    name: 'BankList',
    components: {
        Search,
        Pagination,
        AddOrEdit
    },
    data() {
        return {
            searchOptions: SEARCH_OPTIONS,
            columns: columns,
            listLoading: false,
            data: [],
            page: 1,
            total: 0,
            page_size: 20,
            searchParams: {}
        }
    },
    created() {
        this.init()
    },
    methods: {
        // 初始化数据
        init() {
            this.getBankList()
        },

        // 获取银行列表
        async getBankList() {
            this.listLoading = true
            try {
                const params = {
                    current: this.page,
                    size: this.page_size,
                    ...this.searchParams
                }

                const res = await bankList(params)
                this.data = res.records || []
                this.total = res.total || 0
            } catch (error) {
                console.error('获取银行列表失败:', error)
            } finally {
                this.listLoading = false
            }
        },

        // 搜索处理
        handleSearch(params) {
            this.searchParams = params
            this.page = 1
            this.getBankList()
        },

        // 分页大小改变
        sizeChange(size) {
            this.page_size = size
            this.page = 1
            this.getBankList()
        },

        // 当前页改变
        pageChange(page) {
            this.page = page
            this.getBankList()
        },

        // 添加银行
        handleAdd() {
            this.$refs.AddOrEditRef.openAdd()
        },

        // 编辑银行
        handleEdit(row) {
            this.$refs.AddOrEditRef.openEdit(row)
        },

        // 删除银行
        handleDelete(row) {
            this.$confirm(`确定要删除银行"${row.name}"吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                try {
                    const res = await bankDelete({ id: row.id })
                    if (res.code === 200) {
                        this.$message.success('删除成功')
                        this.getBankList()
                    } else {
                        this.$message.error(res.message || '删除失败')
                    }
                } catch (error) {
                    console.error('删除失败:', error)
                    this.$message.error('删除失败，请重试')
                }
            }).catch(() => { })
        },

        // 改变状态
        async handleChangeStatus(row) {
            try {
                const res = await bankChangeStatus({
                    bankCardId: row.id,
                    useStatus: row.useStatus == 'NO' ? 'YES' : 'NO'
                })
                this.$message.success('状态更新成功')
                this.getBankList()
            } catch (error) {
                console.error('状态更新失败:', error)
            }
        },

        // 获取银行类型标签类型
        getBankTypeTagType(type) {
            const typeMap = {
                'state': 'danger',
                'joint': 'primary',
                'city': 'success',
                'rural': 'warning',
                'foreign': 'info',
                'other': ''
            }
            return typeMap[type] || ''
        },

        // 获取银行类型文本
        getBankTypeText(type) {
            const typeMap = {
                'state': '国有银行',
                'joint': '股份制银行',
                'city': '城市商业银行',
                'rural': '农村商业银行',
                'foreign': '外资银行',
                'other': '其他'
            }
            return typeMap[type] || '未知'
        },

        // 格式化日期
        formatDate(dateStr) {
            if (!dateStr) return '-'
            const date = new Date(dateStr)
            return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', { hour12: false })
        }
    }
}
</script>

<style lang="scss" scoped>
.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 20px;
}
</style>
